<template>
  <div class="pie max-w-[400px] mx-auto p-0" ref="pieRef" />
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { nextTick, onMounted, ref } from "vue"

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})

const pieRef = ref()
onMounted(() => {
  nextTick(() => {
    let myChart = echarts.init(pieRef.value)

    let option = {
      color: ["#F7B500", "#02ACF7"],
      legend: {
        orient: "vertical",
        left: "right",
        top: "center",
        textStyle: {
          padding: 5,
          lineHeight: 20,
          fontSize: 14,
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}：{d}%",
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["30%", "60%"],
          center: ["35%", "50%"],
          label: {
            show: false,
            color: "white",
          },
          labelLine: {
            show: false,
            length: 15,
            length2: 10,
          },
          data: props.data.map((item: any) => ({
            value: Number(item.percent),
            name: item.title,
          })),
        },
      ],
    }
    option && myChart.setOption(option)
    window.addEventListener("resize", () => {
      myChart.resize()
    })
  })
})
</script>

<style scoped></style>
